<script setup>
import {reactive, ref} from "vue";
// reactive定义的对象是Proxy()
/**
 * reactive定义对象类型的响应式数据
 */
let car = reactive({brand: "宝马", price: 288888})
/**
 * reactive定义数组类型的数据
 */
let games = reactive([{id: 1, name: "王者荣耀"}, {id: 2, name: "原神"}, {id: 3, name: "英雄联盟"}])

/**
 * 修改reactive定义的数据
 */
function f1() {
  games[0].name = "穿越火线"
}

/**
 * 注意，reactive定义的变量是深层次的响应式，即对象中很深的属性变化，也是响应式的
 */

/**
 *  reactive定义的响应式对象在重新分配一个对象时，会失去响应式
 */
games = [1, 2, 3] // 失去响应式 不要写这种代码
games = reactive([1, 2, 3]) // 失去响应式 不要写这种代码
// 可以的做法
car = Object.assign(car, {brand: "奥迪", price: 288888})

const p = reactive({
  a: 1,
  b: 2,
  c: ref(3)
})
// 这样的可以直接修改
p.c = 10
</script>

<template>
  <h1>一辆{{ car.brand }}车，价格{{ car.price }}元</h1>
  <!--
  v-for 学习
  -->
  <div v-for="game in games" :key="game.id">{{ game.name }}</div>
  上面与下面等价，属性前加上冒号表示以js变量的形式解析
  <div v-for="game in games" v-bind:key="game.id">{{ game.name }}</div>


</template>

<style scoped>

</style>